<template>
   <div class="login">
        <form action="">
            <div class="inpText">
                <input type="text" name="" id="" placeholder="输入手机号码" v-model="user">
            </div>
            <div class="inpPwd">
                <input type="password" placeholder="输入密码" v-model="pwd">
            </div>
            <div class="btn">
                <button @click="load">登录</button>
            </div>
        </form>
    </div>
</template>
<script>
  import $ from "jquery";
export default {
    data:function () {
        return{
            user:'',
            pwd:''
        }
    },
    method:{
        load:function(){
            var url='http://localhost:3000/users/login?user=' + this.user + '&pwd=' + this.pwd;
            $.get(url,function(res){
                if(res && res.code==0){
                    alert('登录成功')
                }else{
                    console.log("登录失败")
                    console.log(res)
                }
            })
        }

    }
}
</script>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .login{width: 100%;height: 100%;background: #f6f6f6; }
        form{ width: 100%;padding: 0 31px;padding-top:20px;box-sizing: border-box;}
        input {
            border: 0;
            text-decoration: none;
            outline: none;
            border: 1px solid #ccc;
            width: 100%;
            height: 30px;
            padding-left: 10px;
            border-radius: 20px;
        }
        .inpText,.inpPwd{width: 100%;height:30px;margin-bottom: 30px;}
        .btn{height: 40px;width: 100%;text-align: center;}
        .btn button{font-size: 16px; font-weight: bold ;color: #fff; outline: none;border: 0; width: 150px;height: 40px;background:  #fe8233; text-align:center;border-radius:20px;  }
    </style>
